<template>
  <div
    v-for="(item, i) in groups.keys()"
    :ref="
      el => {
        if (el) charts[i] = el;
      }
    "
    style="width: 100%; height: 300px; margin-top: 10px; background: #fff"
    :key="i"
  ></div>
</template>
<script setup>
  import { useStore } from 'vuex';
  import { ref, watch, inject, onMounted, onUnmounted } from 'vue';

  import * as echarts from 'echarts';
  import refresher from '@/libs/autoRefreshShares';

  const echartsOption = {
    grid: {
      left: '20px',
      right: '40px',
      bottom: '10px',
      top: '50px',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        animation: true
      },
      alwaysShowContent: true
    },
    legend: {
      show: true,
      selectedMode: false,
      data: []
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        formatter: '{value}'
      },
      axisPointer: {
        show: true,
        label: {
          show: true,
          formatter: '{value}'
        }
      },
      data: []
    },
    yAxis: [
      {
        type: 'value',
        name: '上证',
        position: 'left',
        min: 2300,
        axisLabel: {
          formatter: '{value}'
        }
      },
      {
        type: 'value',
        name: '涨幅',
        position: 'right',
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: []
  };

  const echartInstances = new Map();

  const $store = useStore();
  const $http = inject('$http');
  const $eventBus = inject('$eventBus');

  const charts = ref([]);
  const groups = ref(new Map());

  function renderIndexes() {
    $http.get('/api/shares/index/statistics', { hideTip: true }).then(res => {
      groups.value.clear();

      (res.datas || []).forEach(d => {
        let group = groups.value.get(d.Name) || [];

        group.push(d);
        groups.value.set(d.Name, group);
      });
    });
  }

  function resizeChartPanel(area) {}

  watch(
    groups,
    () => {
      let index = 0;

      groups.value.forEach((val, key) => {
        let series = [];
        let currentIndexs = [];
        let comparedIndexs = [0];

        if (!echartInstances.has(key)) {
          echartInstances.set(key, echarts.init(charts.value[index]));
        }

        let echartsInstance = echartInstances.get(key);

        val.forEach(m => {
          if (currentIndexs.length > 0) {
            comparedIndexs.push((m.Index - parseFloat(currentIndexs[currentIndexs.length - 1])).toFixed(2));
          }

          currentIndexs.push(m.Index.toFixed(2));
        });

        series.push({
          name: '当前指数',
          type: 'line',
          smooth: true,
          yAxisIndex: 0,
          data: currentIndexs,
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          }
        });

        series.push({
          name: '涨幅',
          type: 'line',
          smooth: true,
          yAxisIndex: 1,
          data: comparedIndexs
        });

        echartsOption.series = series;
        echartsOption.yAxis[0].name = key;
        echartsOption.xAxis.data = val.map(r => r.RecordDateTime);

        echartsInstance.setOption(echartsOption);

        echartsInstance.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: val.length - 1
        });

        index++;
      }, 400);
    },
    { deep: true, flush: 'post' }
  );

  onMounted(() => {
    resizeChartPanel($store.state.area.content);

    renderIndexes();

    refresher.start({
      step({ visible, number }) {},
      done() {
        renderIndexes();
      }
    });

    $eventBus.on('windowResizeChanged', client => resizeChartPanel(client));
  });

  onUnmounted(() => {
    refresher.stop();
  });
</script>
<style lang="less" scoped>
  :deep(.chart-tooltip-line2) {
    padding: 0;
    margin: 5px 0 0 0;

    > b {
      width: 100%;
      display: block;
      text-indent: 15px;

      &:first-of-type {
        text-indent: 0;
      }
    }
  }
</style>
